<!-- 
适配布局
    1、rem基础
    2、媒体查询
    3、less基础
    4、苏宁案例：m.suning.com


rem基础
    1）背景说明
        - 流式布局（百分比）、弹性布局（flex）针对的是【宽度】，而高度很难把控
        - rem可根据屏幕改变而改变宽、高等比例缩放，文字大小缩放

    2）rem
        - 是一种相对单位
            em  参照当前元素或父元素的文字大小
            rem 全称【root em】，参照根元素html的文字大小
            
        - Edge浏览器默认为16px，打印1rem就知道了
        - 通过给html设置字体大小，其它元素使用rem单位，就能统一控制元素大小了

        - rem与px的换算关系
            根标签html，设置font-size:12px;
            非根标签，设置width:10rem;
            换算关系
                1rem = 12px
                10rem = 10*12 = 120px
            rem与html的字体大小相关

        - 插件：自动转换单位
            【px to rem & rpx & vw (cssrem)】
          注意设置默认的参照单位
            rem中cssroot（html）的font-size参照值：默认16px
            vw中的视口宽度参照值：默认750px
 -->
<style>
    html {
        font-size: 12px;
    }
    div {
        font-size: 16px;
    }
    p.one {
        /* 160px*160px */
        width: 10em;
        height: 10em;
        background-color: cyan;
    }
    p.two {
        /* 120px*120px */
        width: 10rem;
        height: 10rem;
        background-color: skyblue;
    }
</style>

<div>
    <p class="one"></p>
    <p class="two"></p>
</div>
